<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./assets/css/index.css">
    <link rel="stylesheet" href="./assets/css/normalize.css">
    <link rel="stylesheet" href="./assets/lib/weiui/weui-1.1.2.css">
</head>
<body>
    <div class="container">

        <div class="table_container">
            <div class="weui-tab">
                <div class="weui-navbar">
                    <div class="weui-navbar__item weui-bar__item_on">
                        选项一
                    </div>
                    <div class="weui-navbar__item">
                        选项二
                    </div>
                    <div class="weui-navbar__item">
                        选项三
                    </div>
                </div>
            </div>
        </div>


        <div class="content_container">
            <div class="weui-tab__panel">
                <div>1</div>
                <div>2</div>
                <div>3</div>
            </div>
        </div>
    
        <div class="weui-tabbar">
            <div class="weui-tabbar__item">
                <div style="display: inline-block; position: relative;">
                    <img src="./images/icon_tabbar.png" alt="" class="weui-tabbar__icon">
                    <span class="weui-badge" style="position: absolute; top: -2px; right: -13px;">8</span>
                </div>
                <p class="weui-tabbar__label">微信</p>
            </div>
            <div class="weui-tabbar__item">
                <img src="./images/icon_tabbar.png" alt="" class="weui-tabbar__icon">
                <p class="weui-tabbar__label">通讯录</p>
            </div>
            <div class="weui-tabbar__item">
                <div style="display: inline-block; position: relative;">
                    <img src="./images/icon_tabbar.png" alt="" class="weui-tabbar__icon">
                    <span class="weui-badge weui-badge_dot" style="position: absolute; top: 0; right: -6px;"></span>
                </div>
                <p class="weui-tabbar__label">发现</p>
            </div>
            <div class="weui-tabbar__item weui-bar__item_on">
                <img src="./images/icon_tabbar.png" alt="" class="weui-tabbar__icon">
                <p class="weui-tabbar__label">我</p>
            </div>
        </div>
    </div>
    
     
     <!-- 适配插件默认10等份 -->
    <script src="./assets/js/flexible.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script>
         $(".weui-navbar").on("click",".weui-navbar__item",function(){
             $(this).siblings(".weui-navbar__item").removeClass("weui-bar__item_on").end().addClass("weui-bar__item_on")
             var $Index = $(this).index();
             $(".weui-tab__panel").find("div").eq($Index).show().siblings("div").hide();
         })
    </script>
</body>
</html>